<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
    <rx-layout style="padding: 10px">
      <div slot="center">
        <a-form :form="form">
          <a-row>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.name','名称')">
                <a-input :placeholder="i18n('form.name','名称')"
                         v-decorator="['name', {rules: [{required: true, message: i18n('form.name','名称','input')}]}]"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.agentType','代理类型')">
                <a-radio-group name="radioGroup" :placeholder="i18n('form.agentType','代理类型')" @change="changeType"
                               v-decorator="['type', {rules: [{required: true, message: i18n('form.agentType','代理类型')}]}]">
                  <a-radio value="all">{{i18n('form.all','全部')}}</a-radio>
                  <a-radio value="flowdef">{{i18n('form.part','部分')}}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-item :label="i18n('form.agent','代理人')" :label-col="labelCol" :wrapper-col="wrapperCol" >
                <rx-input-button  @click="selectUsers"
                                 v-decorator="['toUser' ,{rules: [{required: true, message: i18n('form.agent','代理人必填','select')}]}]"
                ></rx-input-button>

              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.status','状态')">
                <a-radio-group name="radioGroup" :placeholder="i18n('form.status','状态')"
                               v-decorator="['status', {rules: [{required: true, message: i18n('form.status','状态')}]}]">
                  <a-radio :value="1">{{i18n('form.enable','启动')}}</a-radio>
                  <a-radio :value="0">{{i18n('form.disable','禁用')}}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.startTime','开始时间')">
                <a-date-picker :placeholder="i18n('form.startTime','开始时间')" :disabled-date="disabledDate"
                               v-decorator="['startTime', {rules: [{required: true, message: i18n('form.startTime','开始时间')}]}]" format="YYYY-MM-DD"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.endTime','结束时间')">
                <a-date-picker :placeholder="i18n('form.endTime','结束时间')"
                               v-decorator="['endTime', {rules: [{required: true, message: i18n('form.endTime','结束时间')}]}]" format="YYYY-MM-DD"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24">
              <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.describe','描述')">
                <a-textarea :placeholder="i18n('form.describe','描述')" v-decorator="['describe', {rules: [{required: false, message: i18n('form.describe','描述')}]}]"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24">
              <div v-if="type=='flowdef'" style="margin-left: 3%;">
                <div class="table-operator">
                  <a-button type="primary" @click="addSol">{{i18n('list.addProcessBtn','增加流程定义')}}</a-button>
                  <a-button type="danger" @click="delSol">{{$ti18('rxList.delBtn','删除')}}</a-button>
                </div>
                <div>
                  <a-table bordered :dataSource="bpmAgentFlowDefs" :columns="columns" :row-selection="rowSelection">
                  </a-table>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </rx-layout>
  </rx-dialog>
</template>

<script>
  import BpmDefDialog from "./BpmDefDialog"
  import {RxLayout, Util, BaseForm, Dialog} from '@lowcode/jpaas-common-lib'
  import BpmAgentApi from '@/api/bpm/core/bpmAgent'
  import moment from 'moment';

  export default {
    name: "BpmAgentEdit",
    mixins: [BaseForm],
    components: {
      RxLayout,
    },
    data() {
      return {
        columns: [
          {
            title: this.i18n('processList.defId','流程Id'),
            dataIndex: 'defId',
          },
          {
            title: this.i18n('processList.defName','流程方案'),
            dataIndex: 'defName',
          },
        ],
        bpmAgentFlowDefs:[],
        selectedRows:[],
        complexJson:{
            main: {
                toUser: {text: "toUserName", value: "toUser"}
            }
        },
        type:"all"
      }
    },
    created() {
    },
    computed: {
      rowSelection() {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            this.selectedRows=selectedRows;
          },
        };
      },
    },
    methods: {
      i18n(name,text,key){
        return this.$ti18(name,text,"BpmAgent",key);
      },
      disabledDate(current) {
        // Can not select days before today and today
        return current && current < moment().subtract(1,'days').endOf('day');
      },
      changeType(e) {
        this.type = e.target.value;
      },
      addSol() {
        var self=this;
        Util.open({
          component:BpmDefDialog,
          curVm:self,
          widthHeight:['1024px','600px'],
          title:this.i18n('processList.title','流程定义'),
          data:{}
        },function (action,data){
          if (action!="ok"){
            return;
          }
          self.bpmAgentFlowDefs=data;
        });
      },
      delSol(e) {
        for (let i = 0; i < this.selectedRows.length; i++) {
          for (let j = 0; j < this.bpmAgentFlowDefs.length; j++) {
            if (this.selectedRows[i].defId == this.bpmAgentFlowDefs[j].defId) {
              this.bpmAgentFlowDefs.splice(j, 1);
            }
          }
        }
      },

      selectUsers(vm) {
        Dialog.openUserDialog({
          curVm: this, data: {single: true}, widthHeight: ['1200px', '600px']
        }, function (self, user) {
            vm.setVal(user.userId, user.fullName);

        });
      },
      get(id){
          return BpmAgentApi.get(id);
      },
      save(values){
          values.startTime=values.startTime.format("YYYY-MM-DD");
          values.endTime=values.endTime.format("YYYY-MM-DD");
          if(values.type=="flowdef"){
              values.bpmAgentFlowDefs=this.bpmAgentFlowDefs;
          }
          return BpmAgentApi.save(values);
      },
      onload_(data){

        if(!data){
            this.mdl={type:"all",status:1};
            return;
        }
        this.type=data.type;
        this.bpmAgentFlowDefs=data.bpmAgentFlowDefs;
        data.startTime=moment(data.startTime);
        data.endTime=moment(data.endTime);
      }
    },


  }
</script>

<style scoped>
  .listSelectBox {
    display: flex;
  }

  .listCard {
    flex: 1;
    min-height: 32px;
    margin: 4px 10px 4px 0;
    padding: 0 4px;
    border: 1px solid #ddd;
    vertical-align: middle;
  }

  .listButton {
    margin: 4px 0;
  }
</style>